<template>
        <div>
          <el-breadcrumb separator-class='el-icon-arrow-right'>
            <el-breadcrumb-item v-bind:to='{ path: "/" }'>首页</el-breadcrumb-item>
            <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
            <el-breadcrumb-item>视频管理</el-breadcrumb-item>
          </el-breadcrumb>
          <div class='dict-main'>
            <el-tabs v-model='activeName'  class='title-top'>
              <el-tab-pane  label='视频管理' name='index'>
                <div class='main-module'>
                  <div class='btn-module' >
                    <el-button  size='small' @click='openAdd' type='primary' icon='el-icon-plus'>新增</el-button>
                  </div>
                  <!--<el-table :data='albums' stripe style='width: 100%'>-->
                    <!---->
                  <!--</el-table>-->
                  <el-row>
                    <el-col :span="8" v-for="item in videos">
                      <el-card :body-style="{ padding: '10px' }">
                        <img :src="ossProperties.showUrl+item.coverPath" class="image">
                        <div style="padding: 14px;">
                          <span>{{item.name}}</span>
                          <div class="bottom clearfix">
                            <time class="time">{{item.createTime}}</time><br>
                            <time class="time">{{item.remark}}</time><br>
                            <time class="time">状态:{{item.status}}</time>
                            <el-button type="text" class="button" @click="openUpdate(item.id)">详情</el-button>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                  <!--分页-->
                  <div class='block text-center'>
                    <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page='pageable.currentPage' :page-sizes='[12, 24, 48, 96, 192]' :page-size='pageable.pageSize' layout='total, sizes, prev, pager, next, jumper' :total='pageable.total'></el-pagination>
                  </div>
                  <!--</div>-->

                  <!-- 新增,修改弹窗-->
                  <div>
                    <el-dialog :title='TextMap[dialogOption]' :visible.sync='dialogVisible' >
                      <el-form  :model='videoForm' :rules='rules' ref='videoForm' label-width='100px'>
                        <el-form-item label='' prop='id'  style='display: none' >
                          <el-input  v-model='videoForm.id' ></el-input>
                        </el-form-item>
                        <el-form-item label='视频名称' prop='name' >
                          <el-input placeholder='请输入视频名称,不超过20个字' v-model='videoForm.name'></el-input>
                        </el-form-item>
                        <el-form-item label='视频描述' prop='remark' >
                          <el-input placeholder='请输入视频名称,不超过200个字' v-model='videoForm.remark'></el-input>
                        </el-form-item>
                        <el-form-item label='封面图片' prop='cover' >
                          <el-upload
                            class='avatar-uploader'
                            action=''
                            :show-file-list='false'
                            :http-request='doUploadCover'
                            :before-upload='beforeAvatarUpload'>
                            <img v-if='videoForm.cover' :v-model='videoForm.cover' :src='videoForm.coverPath' class='avatar' >
                            <i v-else class='el-icon-plus avatar-uploader-icon'>封面图片</i>
                          </el-upload>
                        </el-form-item>
                        <el-form-item label='BANNER' prop='banner' >
                          <el-upload
                            class='avatar-uploader'
                            action=''
                            :show-file-list='false'
                            :http-request='doUploadBanner'
                            :before-upload='beforeAvatarUpload'>
                            <img v-if='videoForm.banner' :v-model='videoForm.banner' :src='videoForm.bannerPath' class='avatar' >
                            <i v-else class='el-icon-plus avatar-uploader-icon'>Banner图片</i>
                          </el-upload>
                        </el-form-item>
                        <el-form-item label='视频来源' prop='type'>
                          <el-radio-group v-model='videoForm.type'>
                            <el-radio :label='1' @change="selectType(1)">本地上传</el-radio>
                            <el-radio :label='2' @change="selectType(2)">外网链接</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item label='外部链接' prop='url' v-if="videoForm.type!=1">
                          <el-input placeholder='请输入视频链接' v-model='videoForm.url'></el-input>
                        </el-form-item>
                        <el-form-item label='视频上传' prop='url' v-if="videoForm.type==1">
                          <el-upload v-if="videoUrl==''"
                            class="avatar-uploader"
                            action=""
                            :http-request='doUpload'
                            :before-upload='beforeVideoUpload'
                            :show-file-list="false">
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
                          <video v-if="videoUrl !=''" :src="videoUrl" class="avatar" controls="controls"></video>
                          <el-button v-if="videoUrl !=''" @click="reUploadVideo">重新上传</el-button>
                          <el-input type="hidden" placeholder='请输入视频链接' v-model='videoForm.url'></el-input>
                        </el-form-item>
                        <el-form-item label='状态' prop='status'>
                          <el-radio-group v-model='videoForm.status'>
                            <el-radio :label='1'>显示</el-radio>
                            <el-radio :label='0'>隐藏</el-radio>
                          </el-radio-group>
                        </el-form-item>

                      </el-form>
                      <div slot='footer' class='dialog-footer'>
                        <el-button @click='cancel("videoForm")' >取 消</el-button>
                        <el-button :disabled='isDisable' type='primary' @click='saveVideo'>确 定</el-button>
                      </div>
                    </el-dialog>
                  </div>

                </div>
              </el-tab-pane>
            </el-tabs>
          </div>



        </div>
</template>
<script>
import { insert,page,findById } from '@/api/video';
import { uploadOss } from '@/api/image-oss';
import { getOSSProperties, insertImage } from '@/api/image';
import ElButton from '../../../node_modules/element-ui/packages/button/src/button.vue';
export default {
  components: {ElButton},
  data () {
    return {
      videos: [],
      ossProperties: {},
      baseDir: 'news/video',
      videoUrl: '',
      oldUrl: '',
      dialogImageVisible: false,

      activeName: 'index',
      isDisable: false,
      pageable: {
        currentPage: 1,
        pageSize: 12
      },
      TextMap: {
        create: '新建视频',
        update: '修改视频'
      },
      dialogVisible: false,
      dialogOption: '',
      videoForm: {
        id: '',
        name: '',
        remark: '',
        cover: '',
        banner: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入视频名称,不超过20个字',
            trigger: 'blur'
          },
          {
            max: 20,
            message: '长度不超过 20 个字符'
          }
        ],
      remark: [
          {
            required: true,
            message: '请输入视频名称,不超过200个字',
            trigger: 'blur'
          },
          {
            max: 200,
            message: '长度不超过 200 个字符'
          }
        ],
        cover: [
          {
            required: true,
            message: '请上传视频封面',
            trigger: 'blur'
          }
        ],
        banner: [
          {
            required: true,
            message: '请上传视频banner',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    openAdd(){
      this.videoForm = {
        id: '',
        cover: '',
        coverPath: '',
        banner: '',
        bannerPath: '',
        name: '',
        status: 1,
        type: 1,
        remark: ''
      };
      this.videoUrl = '';
      this.dialogOption = 'create';
      this.dialogVisible = true;
    },
    cancel(){
      this.dialogVisible = false
      this.dialogOption = 'create';
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImageVisible = true;
    },
    beforeVideoUpload(file){
      const isMP4 = file.type === 'video/mp4';
      const isLt300M = file.size / 1024 / 1024 < 300;

      if (!isMP4) {
        this.$message.error('上传的视频只能是MP4格式!');
      }
      if (!isLt300M) {
        this.$message.error('上传的视频不能查过300MB!');
      }
      return isMP4 && isLt300M;
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传logo图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传logo图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    },
    doUpload(file){
      var _this = this;
      uploadOss(_this.ossProperties, file, function (url) {
        _this.videoForm.url = url;
        _this.videoUrl =  _this.ossProperties.showUrl + url;
      });
    },
    doUploadCover (file) {
      const loading = this.$loading({
        lock: true,
        text: '正在上传',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var _this = this;
      uploadOss(_this.ossProperties, file, function (url) {
        insertImage(url).then(res => {
          loading.close();
          _this.videoForm.cover = res.data.id;
          _this.videoForm.coverPath = _this.ossProperties.showUrl + res.data.path;
        });
      });
    },
    doUploadBanner (file) {
      const loading = this.$loading({
        lock: true,
        text: '正在上传',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var _this = this;
      uploadOss(_this.ossProperties, file, function (url) {
        insertImage(url).then(res => {
          loading.close();
          _this.videoForm.banner = res.data.id;
          _this.videoForm.bannerPath = _this.ossProperties.showUrl + res.data.path;
        });
      });
    },
    reUploadVideo(){
      this.videoUrl = '';
      this.videoForm.url = '';
    },
    saveVideo(){
      var _this = this;
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 2000);
      var url = this.videoForm.url;
      if (!url || url.length<1) {
        this.$message({
          message: '请上传视频或填写视频链接',
          type: 'error'
        });
        return;
      }
      this.$refs.videoForm.validate(valid => {
          if (valid) {
            insert(_this.videoForm).then(response=>{
              if(response.code==0){
                this.$message({
                  message: response.message,
                  type: 'success'
                });
                this.dialogVisible = false
                this.dialogOption = 'create';
                _this.refresh();
              }else{
                this.$message({
                  message: response.message,
                  type: 'error'
                });
              }
            });
          }
      });
    },

    refresh () {
      var _this = this;
      page(this.pageable.currentPage, this.pageable.pageSize).then(response => {
        if (response.code == 0) {
          _this.pageable = {
            currentPage: response.data.pageInfo.page,
            pageSize: response.data.pageInfo.pageSize,
            total: response.data.pageInfo.total
          };
          _this.videos = response.data.data;
        } else {
          this.$message({
            message: response.message,
            type: 'error'
          });
        }
      });
    },
    handleSizeChange (val) {
      this.pageable.pageSize = val;
      this.refresh();
    },
    handleCurrentChange (val) {
      this.pageable.currentPage = val;
      this.refresh();
    },
    openUpdate(id){
      var _this = this;
      findById(id).then(response=>{
        if(response.code==0){
          var data = response.data;
          data.coverPath=_this.ossProperties.showUrl + data.coverPath;
          data.bannerPath=_this.ossProperties.showUrl + data.bannerPath;
          if(data.type == 1){
            _this.videoUrl = _this.ossProperties.showUrl+data.url;
          }else{
            _this.videoUrl = '';
          }
          this.videoForm = data;
          this.dialogVisible = true;
          this.dialogOption = 'update';
        }else{
          this.$message({
            message: response.message,
            type: 'error'
          });
        }
      });
    },
    selectType(type){
      console.log(type)
      if(type == 1){
        if(!this.oldUrl){
          this.oldUrl = this.videoForm.url;
          this.videoForm.url = '';
          this.videoUrl = '';
        }else{
          this.videoForm.url = this.oldUrl;
          this.videoUrl = this.ossProperties.showUrl + this.oldUrl;
          this.oldUrl = '';
        }
      }else{
        if(!this.oldUrl){
          this.oldUrl = this.videoForm.url;
          this.videoForm.url = '';
        }else{
          this.videoForm.url = this.oldUrl;
          this.oldUrl = '';
        }
      }
    }
  },
  created: function () {
    this.refresh();
    getOSSProperties(this.baseDir).then(response => {
      if(response.code == 0){
        this.ossProperties = response.data;
      }else{
        this.$message({
          message: response.message,
          type: 'error'
        });
      }
    });
  }
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    float: left;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    /*font-size: 28px;*/
    color: #8c939d;
    width: 133px;
    height: 133px;
    line-height: 133px;
    text-align: center;
  }
  .avatar {
    width: 133px;
    height: 133px;
    display: block;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
